body {
    background: #fff;
}

header {
    .header-top {
        display: flex;
        height: 50px;
        justify-content: space-between;
        background: #ff841d;
        .logo {
            width: 200px;
            background: url('../images/header_logo.png') no-repeat;
            background-size: 150px 24px;
            background-position: 10px 16px;
        }
        .uplode {
            width: 40px;
            background: url('../images/header_app.png') no-repeat;
            background-size: 30px 30px;
            background-position: 0 12px;
        }
    }
    .header-bottom {
        display: flex;
        height: 50px;
        padding: 0 10px;
        justify-content: center;
        align-items: center;
        .header-bottom-left{
            flex: 1;
            height: 30px;
            margin-right: 10px;
            input {
                width: 100%;
                line-height: 30px;
                font-size: 16px;
                border-radius: 15px;
                padding-left: 20px;
                background: #f1f1f1;
            }
        }
        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 30px;
            font-size: 16px;
            color: #fff;
            border-radius: 15px;
            background: #ff841d;
        }
    }
}
.commodity{
    margin: 0 5px 20px;
    border:1px solid #d4d4d4;
    >ul{
        >li{
            .commodity-title{
                padding: 0 10px;
                height: 40px;
                line-height: 40px;
                background: #ededed;
                border-bottom: 1px solid #d1d1d1;
                a{
                    font-weight: 600;
                    background: url("../images/arrow1.gif") no-repeat right center ;
                }
            }
            // &:hover .commodity-content{
            //     display: block;
            // }
            .commodity-content{
                display: none;
                ul{
                    display: flex;
                    flex-wrap: wrap;
                    li{
                        width: 33.33%;
                        >a{
                            font-size: 14px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 40px;
                            background: #f9f9f9;
                            border-right: 1px solid #d1d1d1;
                            border-bottom: 1px solid #d1d1d1;
                        }
                        >a:nth-child(3n){
                            border-right: none;
                        }
                    }
                }
                
            }
        }
    }
    
}
footer {
    background: #f1f1f1;
    .direct{
        display: flex;
        height: 40px;
        justify-content: center;
        a{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #dcdcdc;
        }
        .backTop{
            span{
                display:block;
                height: 15px;
                width: 15px;
                background: url("../images/top.jpg");
                background-size: 15px 15px;
            }
        }
    }
    .copyright{
        height: 60px;
        text-align: center;
        font-size: 14px;
        padding-top:10px;
        p{
            a{
                display: inline;
                color:red;
            }
            span{
                color:#727f86;
            }
        }
        >a{
            color: #727f86;
        }
    }
}